<style lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .bench_search {
    margin-bottom: 10px;
  }
  .item1{
    height: 50px;
    line-height: 50px;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
  .ml5{
    margin-left: 5px;
  }
  .ml10{
    margin-left: 10px;
  }
  .ml20{
    margin-left: 20px;
  }
  .ml30{
    margin-left: 30px;
  }
  .input-width{
    width:300px;
  }
  .modal-form-input {
    width: 80%;
    margin-left: 30px;
  }
  .ivu-upload {
    width: 100%;
    .ivu-upload-select {
      padding: 0px;
    }
  }
</style>

<template>
  <Card class="card_style" :bordered="false" :dis-hover="true">
    <Row class="bench_search">
      <Col span="5">
        <span>姓名：</span>
        <Input style="width:70%" v-model="params.name" />
      </Col>
      <Col span="6">
        <span>身份证号：</span>
        <Input style="width:70%" v-model="params.cardno" />
      </Col>
      <Button class="new-btn-sty" @click="searchList" style="margin-right:10px"><Icon type="ios-search" /> 搜索</Button>
      <Button class="new-btn-sty" @click="exportData" style="margin-right:10px">导出</Button>
      <Button class="new-btn-sty" @click="importModal.show=true" style="margin-right:10px">导入发放结果</Button>
    </Row>
    <Table border :columns="columns1" :data="tempDatalist" ref="tablesidy">
      <template slot-scope="{ row, index }" slot="action">
        <span style="margin-right: 5px">
          <Button type="primary" size="small" @click="showInfo(row)">详情</Button>
        </span>
        <span>
          <Button type="primary" size="small" @click="setSend(row)">确认发放</Button>
        </span>
      </template>
    </Table>
    <Row v-if="loadData === true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style"/>
    <Modal v-model="detailModel" :title="modalTitle" width="700">
     <div class="out-row">
        <Row class="item1">
          <Col span="2" class="ml10">身份证号</Col>
          <Col span="9"><Input  v-model="dataInfo.cardno" disabled class="input-wid"></Input></Col>
          <Col span="2" class="ml30">用户姓名</Col>
          <Col span="9"><Input  v-model="dataInfo.name" disabled class="input-wid"></Input></Col>
        </Row>
        <Row class="item1">
          <Col span="2" class="ml10">手机号码</Col>
          <Col span="9"><Input  v-model="dataInfo.mobile" disabled class="input-wid"></Input></Col>
          <Col span="2" class="ml30">提报时间</Col>
          <Col span="9"><Input  v-model="dataInfo.create_time" disabled class="input-wid"></Input></Col>
        </Row>
        <Row class="item1">
          <Col span="2" class="ml10">申请批次</Col>
          <Col span="9"><Input  v-model="dataInfo.batch" disabled class="input-wid"></Input></Col>
          <Col span="2" class="ml30">应发金额</Col>
          <Col span="9"><Input :value="(dataInfo.submit_money||0) * 0.01" disabled class="input-wid"></Input></Col>
        </Row>
        <Row class="item1">
          <Col span="2" class="ml10">实发金额</Col>
          <Col span="9"><Input :value="(dataInfo.actual_money||0) * 0.01" disabled class="input-wid"></Input></Col>
          <Col span="2" class="ml30">发放时间</Col>
          <Col span="9"><Input  v-model="dataInfo.send_time" disabled class="input-wid"></Input></Col>
        </Row>
        <Row class="item1">
          <Col span="2" class="ml10">发放银行</Col>
          <Col span="9"><Input  v-model="dataInfo.bank_name" disabled class="input-wid"></Input></Col>
          <Col span="2" class="ml30">银行卡号</Col>
          <Col span="9"><Input  v-model="dataInfo.bank_no" disabled class="input-wid"></Input></Col>
        </Row>
        <!-- <Row class="item1">
          <Col span="2" class="ml10">提报时间</Col>
          <Col span="9"><Input  v-model="dataInfo.create_time" disabled class="input-wid"></Input></Col>
          <Col span="2" class="ml30"></Col>
          <Col span="9"></Col>
        </Row> -->
        <Row class="item1" style="margin-bottom:50px">
          <Col span="2" class="ml10">备注</Col>
          <Col span="21"><Input v-model="dataInfo.remark" :rows="4" type="textarea" disabled class="input-wid"></Input></Col>
        </Row>
      </div>
      <div slot="footer">
        <Button type="error" @click="detailModel=false">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="sendModal.show" title="资金发放信息" width="600">
      <Form label-position="right" :label-width="120">
        <FormItem label="姓名：" class="modal-form-input">
          <Input type="text" v-model="sendModal.name" disabled></Input>
        </FormItem>
        <FormItem label="身份证号：" class="modal-form-input">
          <Input type="text" v-model="sendModal.cardno" disabled></Input>
        </FormItem>
        <FormItem label="申请批次：" class="modal-form-input">
          <Input type="text" v-model="sendModal.batch" disabled></Input>
        </FormItem>
        <FormItem label="发放金额：" class="modal-form-input">
          <Input type="text" v-model="sendModal.money"></Input>
        </FormItem>
        <FormItem label="银行名称：" class="modal-form-input">
          <Input type="text" v-model="sendModal.bank_name"></Input>
        </FormItem>
        <FormItem label="银行卡号：" class="modal-form-input">
          <Input type="text" v-model="sendModal.bank_no"></Input>
        </FormItem>
        <FormItem label="备注：" class="modal-form-input">
          <Input type="textarea" v-model="sendModal.remark"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="success" @click="saveMoney">确认</Button>
        <Button type="error" @click="sendModal.show=false">关闭</Button>
      </div>
    </Modal>
    <Modal v-model="importModal.show" width="1000" title="人员信息导入">
      <Row :gutter="16">
        <Col span="4">
          <Upload
            :loading="importModal.uploadLoading"
            :before-upload="handleBeforeUpload"
            action=""
            accept=".xls, .xlsx">
            <Button long icon="ios-cloud-upload-outline">选择文件</Button>
          </Upload>
        </Col>
        <Col span="4">
          <Button type="primary" @click="exportDataTmp" long>下载模板</Button>
        </Col>
        <Col span="4">
          <Button type="primary" @click="importData" long>开始导入</Button>
        </Col>
        <Col span="8" style="line-height: 32px;">
          共计：{{importModal.data.length}} 条 | 成功：{{importModal.successNum}} 条 | 失败：{{importModal.failNum}} 条
        </Col>
      </Row>
      <div>
      </div>
      <div style="height: auto; max-height: 400px; overflow: auto;">
        <Table border :columns="columnsImport" :data="importModal.data" :loading="importModal.tableLoading">
          <template slot-scope="{ row, index }" slot="import-result">
            {{row.import_type}}
          </template>
        </Table>
      </div>
      <div slot="footer">
        <Button type="error" @click="importModal.show=false">关闭</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
import { findCapitalSidyList, updateCapitalSubsidy } from '@/api/capitalOrder'
import excel from '@/libs/excel'
export default {
  name: 'businessCheck',
  data () {
    return {
      stateList: [
        {
          value: '0',
          label: '未审核'
        },
        {
          value: '1',
          label: '街道审核'
        },
        {
          value: '2',
          label: '区县审核'
        },
        {
          value: '3',
          label: '市区审核'
        }
      ],
      columns1: [
        { title: '序号', type: 'index', width: 70, align: 'center' },
        { title: '姓名', key: 'name', width: 130, align: 'center' },
        { title: '身份证号', key: 'cardno', minWidth: 180, align: 'center' },
        { title: '手机号', key: 'mobile', width: 130, align: 'center' },
        { title: '申请批次', key: 'batch', width: 120, align: 'center' },
        {
          title: '应发金额',
          key: 'submit_money',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('span', (params.row.submit_money || 0) * 0.01)
          }
        },
        {
          title: '实发金额',
          key: 'actual_money',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('span', (params.row.actual_money || 0) * 0.01)
          }
        },
        { title: '发放时间', key: 'send_time', width: 150, align: 'center' },
        // { title: '发放银行', key: 'bank_name', width: 100, align: 'center' },
        // { title: '银行卡号', key: 'bank_no', width: 100, align: 'center' },
        // { title: '提报时间', key: 'create_time', width: 100, align: 'center' },
        // { title: '备注', key: 'remark', width: 100, align: 'center' }
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      tempDatalist: [],
      params: { pageNo: 1, pageSize: 10 },
      searchInfo: { },
      company_type: this.$store.state.user.severUserInfo.company_type, // 区分 街道 社区
      company_code: this.$store.state.user.severUserInfo.company_code,
      loadData: false, // true加载
      currentPageSize: 10,
      currentPageNo: 1,
      totalnum: 0,
      detailModel: false,
      dataInfo: {},
      sendModal: { show: false },
      importModal: {
        show: false,
        uploadLoading: false,
        tableLoading: false,
        data: [],
        successNum: 0,
        failNum: 0
      },
      columnsImport: [
        { title: '序号', type: 'index', width: 70, align: 'center' },
        { title: '姓名', key: 'name', width: 110 },
        { title: '身份证号', key: 'cardno', width: 160 },
        { title: '发放金额', key: 'money', width: 100, align: 'center' },
        { title: '银行名称', key: 'bank_name', width: 160 },
        { title: '银行卡号', key: 'bank_no', width: 120, align: 'center' },
        { title: '备注', key: 'remark', minWidth: 120 },
        { title: '结果', align: 'center', slot: 'import-result', width: 120 }
      ],
      permiAble: true,
      modalTitle: ''
    }
  },
  methods: {
    init (params) {
      this.tempDatalist = []
      findCapitalSidyList(params).then(res => {
        if (res.data.errcode === 0) {
          this.tempDatalist = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          this.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取数据失败', desc: res.data.errmsg })
        }
      })
    },
    change (pageNo) {
      this.params.pageNo = pageNo
      this.loadData = true
      this.init(this.params)
    },
    showInfo (row) {
      this.modalTitle = '统发详情'
      this.permiAble = true
      this.detailModel = true
      this.dataInfo = row
    },
    searchList () {
      this.params.pageNo = '1'
      this.init(this.params)
    },
    // 时间转换为日期-> 2019-02-02
    date2str (date) {
      if (!date || typeof date === 'string') {
        return date
      }
      var time1 = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      time1 += '-' + (month < 10 ? '0' + month : month)
      time1 += '-' + (day < 10 ? '0' + day : day)
      return time1
    },
    // 导出社区统计数据
    exportData () {
      if (this.tempDatalist.length === 0) {
        this.$Notice.warning({ title: '导出失败', desc: '无数据' })
        return
      }
      let today = new Date()
      this.$refs.tablesidy.exportCsv({
        filename: '发放统计' + this.date2str(today),
        original: false
      })
    },
    setSend (obj) {
      this.sendModal.cardno = obj.cardno
      this.sendModal.name = obj.name
      this.sendModal.batch = obj.batch
      this.sendModal.money = ''
      this.sendModal.bank_name = ''
      this.sendModal.bank_no = ''
      this.sendModal.remark = ''
      this.sendModal.show = true
    },
    saveMoney () {
      if (!this.sendModal.bank_name) {
        this.$Notice.warning({ title: '银行名称不能为空' })
        return
      }
      let money = parseFloat(this.sendModal.money)
      if (isNaN(money)) {
        this.$Notice.warning({ title: '发放金额错误' })
        return
      }
      if (!this.sendModal.bank_no) {
        this.$Notice.warning({ title: '银行卡号不能为空' })
        return
      }
      let param = {
        cardno: this.sendModal.cardno,
        actual_money: money * 100,
        bank_name: this.sendModal.bank_name,
        bank_no: this.sendModal.bank_no,
        remark: this.sendModal.remark
      }
      updateCapitalSubsidy(param).then(res => {
        if (res.data.errcode === 0) {
          this.sendModal.show = false
          this.init(this.params)
        } else {
          this.$Notice.error({ title: '发放失败', desc: res.data.errmsg })
        }
      })
    },
    importData () {
      if (!this.importModal.data || this.importModal.data.length === 0) {
        this.$Notice.warning({ title: '导入失败', desc: '无数据' })
        return
      }
      let that = this
      for (let i = 0; i < this.importModal.data.length; i++) {
        let item = this.importModal.data[i]
        if (!item.bank_name) {
          item.import_type = '银行名称不能为空'
          that.importModal.failNum++
          continue
        }
        let money = parseFloat(item.money)
        if (isNaN(money)) {
          item.import_type = '发放金额错误'
          that.importModal.failNum++
          continue
        }
        if (!item.bank_no) {
          item.import_type = '银行卡号不能为空'
          that.importModal.failNum++
          continue
        }
        let param = {
          cardno: item.cardno,
          actual_money: money * 100,
          bank_name: item.bank_name,
          bank_no: item.bank_no,
          remark: item.remark
        }
        updateCapitalSubsidy(param).then(res => {
          if (res.data.data) {
            item.import_type = '导入成功'
            that.importModal.successNum++
          } else if (res.data.errcode === 1105) {
            item.import_type = '导入失败：无此人信息'
            that.importModal.failNum++
          } else {
            item.import_type = '导入失败：' + res.data.errmsg
            that.importModal.failNum++
          }
          that.$forceUpdate()
        })
      }
    },
    exportDataTmp () {
      window.open('http://imgdl.tripln.top/webhdfs/v1/示例模板/发放示例.xlsx?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0')
    },
    // 上传 excel
    handleBeforeUpload (file) {
      const fileExt = file.name.split('.').pop().toLocaleLowerCase()
      if (fileExt === 'xlsx' || fileExt === 'xls') {
        this.readFile(file)
        // this.file = file
      } else {
        this.$Notice.warning({
          title: '文件类型错误',
          desc: '文件：' + file.name + '不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。'
        })
      }
      return false
    },
    // 处理解析上传数据
    readFile (file) {
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      reader.onloadstart = e => {
        this.importModal.uploadLoading = true
        this.importModal.tableLoading = true
      }
      reader.onerror = e => {
        this.$Message.error('文件读取出错')
      }
      reader.onload = e => {
        this.$Message.info('文件读取成功')
        this.importModal.data = []
        this.importModal.successNum = 0
        this.importModal.failNum = 0
        const data = e.target.result
        const { header, results } = excel.read(data, 'array')
        console.log(header, 'header')
        let that = this
        results.forEach(function (item, index) {
          let tmpData = {
            name: item['姓名'],
            cardno: item['身份证号'],
            money: item['发放金额'],
            bank_name: item['银行名称'],
            bank_no: item['银行卡号'],
            remark: item['备注'],
            import_type: '未导入'
          }
          that.importModal.data.push(tmpData)
        })
        this.importModal.uploadLoading = false
        this.importModal.tableLoading = false
      }
    }
  },
  mounted () {
    this.init(this.params)
  }
}
</script>
